@import "../../theme/theme";
@basecls :keep-menu;
@navcls: keep-banner;
.@{navcls} {
    height: 21.8rem;
    width: 100%;
    background: url(http://cdn.hourxu.com/banner4.jpg) 50% 50% no-repeat;
    background-color: rgba(148, 148, 148, 0.5);
    background-size: cover;
    color: #fff;
    position: relative;
    box-shadow: 0px 2px 8px rgba(0, 21, 41, 0.35);
    &-menu {
        height: 60px;
        line-height: 60px;
        width: 100%;
        font-size: 14px;
        &-left {
            padding: 0;
            margin: 0;
        }
        &-left li {
            float: left;
            list-style: none;
            padding: 0 20px;
        }
        &-right {
            float: right;
            padding: 0;
            margin: 0;
        }
        &-right li {
            float: left;
            list-style: none;
            padding: 0 20px;
        }
    }
}

.@{basecls} {
    &-left {
        width: 20%;
        position: relative;
        box-sizing: border-box;
        height: 100%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        background: #fff;
        float: left;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    }
    &-logo {
        height: 60px;
        line-height: 40px;
        padding: 10px 10px;
        text-align: center;
        background: @default-5;
        color: #fff;
        margin: 0;
        font-size: 16px;
    }
    &-item {
        background: #fff;
        list-style: none;
        font-size: 12px;
        height: 40px;
        line-height: 30px;
        padding: 5px;
        padding-left: 30px;
        position: relative;
        cursor: pointer;
        &-selected {
            background: @default-4;
            color: #fff;
        }
        &:hover {
            background: @default-4;
            color: #fff;
        }
    }
    &-submenu {
        font-size: 12px;
        padding: 0;
        margin: 0 auto;
        display: flex;
        width: 100%;
        color: @default-5;
        flex-direction: column;
        overflow: hidden;
        & a {
            text-decoration: none;
            color: @default-5;
        }
        &>.@{basecls}-submenu a {
            padding-left: 20px;
            display: block;
        }
        &>.@{basecls}-submenu {
            &>.@{basecls}-submenu-title {
                padding-left: 20px;
            }
        }
        &-title {
            padding: 5px;
            height: 40px;
            line-height: 30px;
            cursor: pointer;
            list-style: none;
            color: @default-5;
            background: #fff;
        }
    }
}